<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <title>首页</title>
    <link rel="stylesheet" href="../css/style.css">

</head>
<body class="index">
    <!-- 我要贷款 -->
    <div class="box_wydk ">
        <!-- 头部 -->
        <div class="header">
            <p class="l">小宝口袋</p>
            <a href="xiaoxizx.html" class="r"><img src="../images/new_1@2x.png" alt="" /></a>
        </div>
        <!-- 轮播图 -->
        <div class="banner" style="overflow:hidden;">
            <div class="logo clear">
                <div class="bannerBox" style="height: 100%">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="../images/banner01@2x.png" alt="" style="width: 100%;height: 100%;z-index: 10000">
                        </div>
                        <div class="swiper-slide">
                            <img src="../images/banner02@2x.png" alt="" style="width: 100%;height: 100%;z-index: 100">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 公告 -->
        <div class="gonggao">
            <span class="xbxx l">小宝消息</span>
            <div class="box-gonggao">
                <div class="gonggaobox"></div>
            </div>
        </div>
        <!-- 借款信息 -->
        <div class="content">
            <div class="cd">
                <img src="../images/money_icon@2x.png" alt="" class="l" />
                <p class="l">贷款金额</p>
                <img src="../images/time_icon@2x.png" alt="" class="l">
                <p class="l">贷款时长</p>
            </div>
            <div class="con">
                    <div class="containers">
                            <div class="swiper-container swiperone">
                              <div class="swiper-wrapper">
                              </div>
                            </div>
                            <p><span>元</span></p> 
                    </div>
                    <div class="containers">
                        <div class="swiper-container swipertwo">
                            <div class="swiper-wrapper">
                            </div>
                        </div>
                        <p><span>天</span></p>
                    </div>
            </div>
        </div>
        <div class="content_cost">
            <p class="cc">快速审查费：<span class="auditFee">200.00</span>元</p>
            <p class="cc">利息： <span class="profitFee">30.00</span>元</p>
            <p class="cc">账户管理费：<span class="manageFee">70.00</span>元</p>
            <p class="cc">实际到账金额：<span class="actualAmount" style="color:#FF723F;font-size:13px;">1800.00</span>元</p>
            <div>
                <img src="../images/greenOval_icon@2x.png" alt="" class="shouquanimg l">
                <p class="shouquan l">个人信息使用授权书（查询服务）</p>
            </div>
        </div>
        <div class="btn">我要贷款</div>
        <div class="mask hide">
            <div class="mask-box">
                <div class="mask-box-title">用户协议</div>
                <div class="mask-box-content"></div>
                <div class="mask-box-quest">
                    <div class="mask-box-quest-no">不同意</div>
                    <div class="mask-box-quest-yes">同意</div>
                </div>
            </div>
        </div>
    </div>
    <script src="../src/jquery/jquery-3.3.1.min.js"></script>
    <script src="../src/jquery/layer-v3.1.1/layer/layer.js"></script>
    <script src="../src/cookie.js"></script>
    <script src="../src/global.js"></script>
    <script src="../src/js/index.js"></script>
    <script src="../src/js/gongzhong.js"></script>
    <script src="../src/jquery/swiper.min.js"></script>
    <script>
        var a='';
        var mySwiper="";
        var mySwiperTwo="";
        //轮播图
        $('.banner').click(function () {
            switch(parseInt(bannerBox.activeIndex)){
                case 0:
                    location.href = 'xinshougl.html'
                    break;
                case 1:
                    location.href = 'liaojiecp.html'
                    break
            }
        });
        var bannerBox = new Swiper('.bannerBox', {
            autoplay: true,//可选选项，自动滑动
            delay:3500,
        })
        var list1=[1000,2000,1000,2000];
        var list2=[10,10];
        var str1 = "";21
        var str2 = "";
        $.ajax({
            type: "get",
            url: $host+'/api/open/loanData/loanNum',
            data: {},
            async: false,
            dataType:'json',
            success: function(result){
                var data = result.data;
                for(var i=0;i<data.amounts.length;i++){
                    list1.push(data.amounts[i].loanAmount);
                }
                for(var i=0;i<data.times.length;i++){
                    list2.push(data.times[i].loanNum);
                }
                listOne()
                listTwo()
            },
            error:function(){
                console.log('首页贷款金额和时长接口错误')
            }
        });
        function listOne(){
            for(var i = 0;i<list1.length;i++){
                str1 += '<div class="swiper-slide">'+list1[i]+'</div>';
            }
            $(".swiperone .swiper-wrapper").html(str1)
                mySwiper = new Swiper('.swiperone.swiper-container',{
                    observeParents: true,//修改swiper的父元素时，自动初始化swiper
                    direction : 'vertical',
                    height:40,
                    initialSlide :1,
                    on: {
                        slideChangeTransitionEnd: function(){
                            var amount=$(".swiperone .swiper-wrapper .swiper-slide").eq(this.activeIndex).html();
                            $.ajax({
                                type: "get",
                                url: $host+'/api/open/loanData/loanData',
                                data: {
                                    amount:amount,
                                },
                                async: true,
                                dataType:'json',
                                success: function(result){
                                    var data=result.data;
                                    $('.auditFee').html(data.auditFee);
                                    $('.profitFee').html(data.profitFee);
                                    $('.manageFee').html(data.manageFee);
                                    $('.actualAmount').html(data.actualAmount);
                                }
                            });
                            a = $(".swiperone .swiper-wrapper .swiper-slide").eq(this.activeIndex).html();
                        //console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
                        //console.log($(".swiperone .swiper-wrapper .swiper-slide").eq(this.activeIndex).html())
                        },
                    },
                })
            var h=$('.swiperone .swiper-wrapper .swiper-slide').height()*list1.length;
            $('.swiperone .swiper-wrapper').height(h);
        }
        function listTwo(){
            for(var i = 0;i<list2.length;i++){
                str2 += '<div class="swiper-slide">'+list2[i]+'</div>'
            }
            $(".swipertwo .swiper-wrapper").html(str2);
            mySwiperTwo = new Swiper('.swipertwo.swiper-container',{
                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                direction : 'vertical',
                height:40,
                initialSlide :1,
                on: {
                    slideChangeTransitionEnd: function(){
                    },
                },
            });
            var hh=$('.swiperone .swiper-wrapper .swiper-slide').height()*list2.length;
            $('.swipertwo .swiper-wrapper').height(hh);
        }
        setTimeout(function(){
            $(".swiperone").css("padding-top","1.6rem");
            $(".swipertwo").css("padding-top","1.6rem");
        },50)

        //授权书
        $('.shouquan').click(function(){
            $('.mask').show();
            $.ajax({
                type: "POST",
                url: $host+'/api/info/info',
                async: true,
                dataType:'json',
                success: function(result){
                    $('.mask-box-content').text(result.data.persionInfo);
                },
                error:function(){
                    console.log('接口错误')
                }
            });
            //同意
            $('.mask-box-quest-no').click(function(){
                $('.mask').hide();
                $('.shouquan').attr("test","bbb")
                $('.shouquanimg').attr('src','../images/../images/greenOval_icon@2x.png');
            })
            //不同意
            $('.mask-box-quest-yes').click(function(){
                $('.mask').hide();
                $('.shouquan').attr("test","aaa");
                $('.shouquanimg').attr('src','../images/greenOval_icon2@2x.png');
            })
        })

    </script>

</body>
</html>